<!DOCTYPE html>
<html lang="en">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
   
	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
	<!-- <link href="plug/bootstrap-5.1.3/css/bootstrap.css" rel="stylesheet" type="text/css" /> -->
	<link href="css/login/login.css" rel="stylesheet" type="text/css" />
	<title>登陆页面</title>

</head>

<body>
    
	<div class="container">
		<div class="row">
			<div id="banner" class="banner responsive"></div>
		</div>
	</div>
	<div class="card">
		<div class="card-body">
			<div class="container">
				 <div class="form-group row">
					<div class="col-12">
						<ul class="parsley-errors-list smallFontSize" id="errorMsg">
							<li>The username and password are not empty</li>
						</ul>
					</div>
				 </div>
				<div class="form-group row">
					<div class="control-label col-lg-4 col-xl-4 col-xxl-4">
						<label for="username" class="col-form-label">Username:<em></em></label>
					</div>
					<div class="col-lg-8 col-xl-8 col-xxl-8">
						<input class="form-control" type="text" name="username" id="username" value=""
							maxlength="15">
					</div>
				</div>
				<div class="form-group row">
					<div class="col-lg-4 col-xl-4 col-xxl-4">
						<label for="password" class="col-form-label">Password:<em></em></label>
					</div>
					<div class="col-lg-8 col-xl-8 col-xxl-8">
						<input class="form-control" type="password" name="password" id="password" value=""
							maxlength="15">
					</div>
				</div>
				<div class="form-group row">
					<div class="col-xl-12 col-xxl-12">
						<input class="btn btn-primary form-control" type="button" value="Log In" onclick="checkFunction()" />
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="version smallFontSize">
		Version: 0.0.1
	</div>

	<script type="text/javascript">

		document.getElementById("errorMsg").style.display = "none";
        function checkFunction() {
            var usernameInput = document.getElementById("username").value;
            var passwordInput = document.getElementById("password").value;
            var usernameField = document.getElementById("username");
            var passwordField = document.getElementById("password");
            var message = document.getElementById("errorMsg");

            if (usernameInput != "" && passwordInput != "") {
				document.getElementById("errorMsg").style.display = "none";
				usernameField.classList.remove("is-invalid");
				passwordField.classList.remove("is-invalid");
                checkPassword(usernameInput, passwordInput);
            } else {
				document.getElementById("errorMsg").style.display = "block";

                if (usernameInput == "") {
                    usernameField.classList.add("is-invalid");
                } else {
                    usernameField.classList.remove("is-invalid");
                }
                if (passwordInput == "") {
                    passwordField.classList.add("is-invalid");
                } else {
                    passwordField.classList.remove("is-invalid");
                }
            }

        }

        function checkPassword(username, password) {
            var login = 0;
            if (username == 'admin') {
                if (password == 'admin') {
                    login = 1;
                    document.forms["login"].submit();
                }
            }
            if (login == 0) {
                document.getElementById("username").value = '';
                document.getElementById("password").value = '';
                message.classList.add("message");

                message.innerHTML = "Invalid username and/or password";
            }
        }



    </script>
</body>


</html>